<template>
  <div class="div-app">

    <el-dialog
      title="新增区域"
      :visible="dialogVisible"
      width="600px"
      @close="ishowchange"
    >
      <span style="position: relative;top: 27px; right: -419px;  z-index: 99;color: #999;">{{ minlengh }} /15</span>
      <el-form
        ref="roleDialogForm"
        label-width="80px"
        :model="listIfon"
        :rules="rules"
      >
        <el-form-item
          prop="name"
          label="区域名称"
        >
          <el-input v-model="listIfon.name" placeholder="请输入" maxlength="15" />
        </el-form-item>
        <el-form-item label="备注说明" prop="remark" size="medium">
          <el-input v-model="listIfon.remark" placeholder="请输入备注(不超过四十字)" type="textarea" row="3" maxlength="40" />
        </el-form-item>
        <span style="position: relative;top: -48px;right: -421px;color: #999;"> {{ minlenghmax }} /40</span>
      </el-form>
      <el-row slot="footer" class="dialog-footer" type="flex" justify="center" align="middle">
        <el-button @click="ishowchange">取 消</el-button>
        <el-button style="background: linear-gradient(135deg,#ff9743,#ff5e20)!important; color: #fff;margin-left: 65px;" @click="regionget">确 定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getregionApi, regionchangeApi } from '@/api/index'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    changlist: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      listIfon: {},
      rules: {
        name: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
        remark: [{ required: true, message: '请填写备注', trigger: 'blur' }]
      }
    }
  },
  computed: {
    minlengh() {
      return this.listIfon.name?.length || 0
    },
    minlenghmax() {
      return this.listIfon.remark?.length || 0
    }
  },

  created() {
    if (this.changlist.id) {
      this.listIfon = { ...this.changlist }
    }
  },
  methods: {
    ishowchange() {
      this.$emit('update:dialogVisible', false)
    },
    async regionget() {
      if (this.changlist.id) {
        try {
          const res = {
            regionName: this.listIfon.name,
            remark: this.listIfon.remark
          }
          await regionchangeApi(this.changlist.id, res)
          this.$message.success('修改成功')
          this.ishowchange()
          this.$emit('changeget')
        } catch (error) {
          this.$message.error('修改失败')
        }
      } else {
        try {
          await this.$refs.roleDialogForm.validate()
          const res = {
            regionName: this.listIfon.name,
            remark: this.listIfon.remark
          }
          await getregionApi(res)
          this.$message.success('添加成功')
          this.ishowchange()
          this.$emit('changeget')
        } catch (error) {
          if (error === false) {
            this.$message.error('请填写完整')
          } else {
            this.$message.error('已存在此名称的对象')
          }
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
.point-app{
    width: 700px;
    height: 400px;
    border-radius: 20px;
    background-color: pink;
}
::v-deep .el-dialog{
   border-radius: 20px;
   .el-dialog__body{
    width: 500px;
    margin: 0 auto;
   }
}
</style>
